<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: none;
        }

        .show-box {
            display: block;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="control">
            <button>选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="content">
            <div class="box show-box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>

    <script>
        /*function Table(btn_selector, content_selector) {
            //按钮选项
            this.btns = document.querySelectorAll(btn_selector);
            //内容获取
            this.contents = document.querySelectorAll(content_selector);
            //索引
            this.index = 0;
            this.bindEvent();
        }
        //事件绑定功能
        Table.prototype.bindEvent = function () {
            //实例对象
            var self = this;
            //循环btns
            for (var i = 0; i < self.btns.length; i++) {
                self.btns[i].index = i;
                //绑定onclick事件
                self.btns[i].onclick = function () {
                    //this.index；
                    self.index = this.index;
                    self.changeTable();
                }
            }

        }
        //内容切换功能
        Table.prototype.changeTable = function () {
            var self = this;
            //隐藏盒子内容
            for (var i = 0; i < self.contents.length; i++) {
                self.contents[i].style.display = "none";
            }
            self.contents[self.index].style.display = "block";
        }
        var tab1 = new Table(".control button", ".box");*/
        function Table(btn_selector,content_selector){
            //获取btn
            this.btns = document.querySelectorAll(btn_selector);
            //获取contents
            this.contents = document.querySelectorAll(content_selector);
            //索引
            this.index = 0;
            this.bindEvent();
        }
        //按钮功能绑定
        Table.prototype.bindEvent = function(){
            var self = this;
            for(var i = 0; i < self.btns.length; i++){
               self.btns[i].index = i;
               self.btns[i].onclick = function(){
                   self.index = this.index;
                   self.changeTable();
               }
            }
        }
        //内容板块切换
        Table.prototype.changeTable = function () {
            var self = this;
            //隐藏盒子内容
            for (var i = 0; i < self.contents.length; i++) {
                // self.contents[i].style.display = "none";
                let cn = self.contents[i].className;
                self.contents[i].className = cn.replace(' show-box','');
            }
            // self.contents[self.index].style.display = "block";
            self.contents[self.index].className += " show-box";
            
        }
        var tab1 = new Table(".control button",".box");

        
    </script>
</body>

</html>